<template>
  <div id="layout">
    <router-view/>
    <van-tabbar v-model="active">
      <!--<van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>-->
      <van-tabbar-item icon="balance-o" to="/business">交易</van-tabbar-item>
      <van-tabbar-item icon="orders-o" to="/order">订单</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/mine">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
  export default {
    name: "Layout",
    data() {
      return {
        active: 2
      };
    },
    methods: {

    },
    mounted: function () {
      if (!sessionStorage.getItem('user')) {
        this.$router.push('/login');
      }
    },
    beforeUpdate() {
      // 解决回退、刷新时底部Tabbar与页面内容对不上的问题
      if (this.$route.path === '/business') {
        this.active = 0;
      } else if (this.$route.path === '/order') {
        this.active = 1;
      } else if (this.$route.path === '/mine') {
        this.active = 2;
      } else {
        this.active = 2;
      }
    }
  }
</script>

<style scoped>

</style>
